@import '../../../../../style/color.scss';
@import '../../../../../style/font.scss';
@import "../../../../../style/mixin.scss";

.map-info-modal.ant-modal {
  height: 915px;
  padding: 28px 32px;
  box-sizing: border-box;
  background:
    url("./../../../../../../images/page/modal_l4.png") no-repeat top left,
    url("./../../../../../../images/page/modal_r4.png") no-repeat top right;
  background-size: 263px 100%;
  position: relative;
  top: 20px;

  .business {
    height: 480px;
    overflow: auto;
  }

  .table-bottom {
    height: 330px;
    overflow: auto;
  }

  .middle-height {
    height: 187px;
    overflow: auto;
  }

  .g-label {
    width: 120px;
  }

  .close {
    position: absolute;
    top: -10px;
    right: -200px;
    cursor: pointer;
  }

  .ant-modal-content {
    padding: 0;
    background: none;
    border: none;

    .ant-modal-body {
      background: none;
      padding: 0;
      border: none;
    }

  }

  .items-wrap {
    display: inline-block;
    vertical-align: top;

    .item {

      &:not(:first-child) {
        margin-top: 10px;
      }
    }

    .content-wrap {
      width: 100%;
      height: 100%;
      border: solid 1px $form-border-color;

      .header {
        text-align: center;
        background-image: linear-gradient(-90deg, #013045 0%, #1CBAE8 52%, #002D41 100%);
        border-radius: 0;
        border-bottom: 1px solid $modal-border-color;
        font-family: $regular-font-family;
        font-size: 28px;
        color: #FFFFFF;
        letter-spacing: 1.39px;
        text-shadow: 0 0 4px rgba(37,247,204,0.50);
        line-height: 80px;
      }

      .content {
        @include grid-background();
        padding: 0 10px;

        .more {
          font-family: $regular-font-family;
          font-size: 20px;
          color: $form-border-color!important;
          letter-spacing: 1px;
          text-align: right;
          padding-bottom: 20px;
          cursor: pointer;
        }
        .more-verticle {
          padding-top: 20px;
        }

        .title-wrap, .row-wrap {
          padding-top: 10px;
          line-height: 28px;

          >div {
            display: inline-block;
            font-family: $regular-font-family;
            font-size: 20px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-shadow: 0 0 4px rgba(255,255,255,0.50);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }

          >div:nth-child(1),>div:nth-child(2) {
            width: 25%;
          }
          >div:last-child {
            width: 50%;
          }

          >span {
            display: inline-block;
            width: 25%;
            font-family: $regular-font-family;
            font-size: 20px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-shadow: 0 0 4px rgba(255,255,255,0.50);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }

        }

        .row-supply {
          padding-top: 15px;
          line-height: 28px;
          width: 100%;
          font-family: $regular-font-family;
          font-size: 20px;
          color: #FFFFFF;
          letter-spacing: 1px;
          text-shadow: 0 0 4px rgba(255,255,255,0.50);
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;

          &:last-child {
            padding-bottom: 15px;
          }
        }

        .row-wrap {
          padding-top: 15px;
        }

        .business-wrap {

          >div {
            padding-top: 10px;
            font-family: $regular-font-family;
            font-size: 20px;
            color: #FFFFFF;
            letter-spacing: 1px;
            line-height: 28px;

            >span:first-child {
              padding-right: 10px;
            }

            &:last-child {
              padding-top: 10px;
              padding-bottom: 10px;
            }
          }

        }
      }
    }
  }

  .items-wrap-left {
    width: 35%;
  }

  .items-wrap-middle {
    width: 27%;
    margin-left: 2%;
    margin-right: 2%;
  }

  .items-wrap-right {
    width: 34%;
  }

  .chart-item-wrap {
    position: relative;

    .year {
      position: absolute;
      right: 90px;
      top:50px;
      font-family: $regular-font-family;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
    }
  }

}
